<template>
  <div class="batch-bill-preview">
    <van-nav-bar
      title="批量账单预览"
      left-text="返回"
      left-arrow
      @click-left="router.back()"
    />
    
    <div class="page-content">
      <!-- 日期和订单汇总 -->
      <div class="summary-card">
        <div class="date">{{ currentDate }}</div>
        <div class="total-info">
          <div class="info-item">
            <div class="label">待结算订单</div>
            <div class="value">{{ orders.length }}单</div>
          </div>
          <div class="info-item">
            <div class="label">合计金额</div>
            <div class="value amount">¥{{ totalAmount.toFixed(2) }}</div>
          </div>
        </div>
      </div>
      
      <!-- 订单列表 -->
      <div class="orders-list" v-if="orders.length > 0">
        <div v-for="order in orders" :key="order.id" class="order-item">
          <div class="customer-info">
            <img v-if="order.image" :src="order.image" alt="avatar" class="avatar">
            <van-icon v-else name="contact" size="40" color="#1989fa" class="default-avatar" />
            <div class="info">
              <div class="name">{{ order.buyerName || '无名客户' }}</div>
              <div class="time">{{ order.time }}</div>
            </div>
          </div>
          <div class="order-summary">
            <div class="products">
              <span v-for="(product, index) in order.products.slice(0, 2)" :key="product.id">
                {{ product.name }}{{ index < Math.min(order.products.length - 1, 1) ? '、' : '' }}
              </span>
              <span v-if="order.products.length > 2">等{{ order.products.length }}件</span>
            </div>
            <div class="amount">¥{{ order.totalAmount.toFixed(2) }}</div>
          </div>
          <div class="order-actions">
            <van-button size="small" @click="viewOrderDetail(order)">查看详情</van-button>
            <van-button size="small" type="primary" @click="printBill(order)">打印账单</van-button>
          </div>
        </div>
      </div>
      
      <div class="empty-list" v-else>
        <van-empty description="暂无待结算订单" />
      </div>
      
      <!-- 底部操作按钮 -->
      <div class="footer-actions">
        <van-button type="default" block @click="goBackToSettlement">返回结算页</van-button>
        <van-button type="primary" block @click="printAllBills" :disabled="orders.length === 0">打印全部账单</van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'

// 定义类型
interface Product {
  id: number;
  name: string;
  quantity: number;
  price: number;
}

interface Order {
  id: number;
  customerId: number;
  buyerName: string;
  image?: string;
  date: string;
  time: string;
  products: Product[];
  totalAmount: number;
  status: 'pending' | 'completed';
  priceAdjustments?: {
    productId: number;
    productName: string;
    originalPrice: number;
    newPrice: number;
    difference: number;
  }[];
}

const router = useRouter()
const currentDate = ref(new Date().toLocaleDateString())
const orders = ref<Order[]>([])

// 获取待结算订单列表
const fetchPendingOrders = () => {
  // 模拟从API获取数据
  setTimeout(() => {
    orders.value = [
      {
        id: 1,
        customerId: 101,
        buyerName: '张三',
        image: '/avatars/1.png',
        date: '2023-11-22',
        time: '10:30',
        products: [
          { id: 1, name: '奶茶', quantity: 2, price: 15 },
          { id: 2, name: '蛋糕', quantity: 1, price: 25 }
        ],
        totalAmount: 55,
        status: 'pending'
      },
      {
        id: 2,
        customerId: 102,
        buyerName: '李四',
        image: '/avatars/2.png',
        date: '2023-11-22',
        time: '11:45',
        products: [
          { id: 3, name: '咖啡', quantity: 1, price: 20 },
          { id: 4, name: '三明治', quantity: 1, price: 18 }
        ],
        totalAmount: 38,
        status: 'pending'
      },
      {
        id: 3,
        customerId: 103,
        buyerName: '王五',
        image: '/avatars/3.png',
        date: '2023-11-22',
        time: '14:20',
        products: [
          { id: 5, name: '炒面', quantity: 1, price: 28 },
          { id: 6, name: '可乐', quantity: 1, price: 8 },
          { id: 7, name: '鸡翅', quantity: 2, price: 12 }
        ],
        totalAmount: 60,
        status: 'pending'
      }
    ]
  }, 500)
}

// 计算合计金额
const totalAmount = computed(() => {
  return orders.value.reduce((sum, order) => sum + order.totalAmount, 0)
})

// 查看订单详情
const viewOrderDetail = (order: Order) => {
  showDialog({
    title: `订单详情 - ${order.buyerName}`,
    message: order.products.map(p => `${p.name} x${p.quantity} ¥${p.price.toFixed(2)}`).join('<br>') + 
             `<br><br><b>合计: ¥${order.totalAmount.toFixed(2)}</b>`,
    theme: 'round-button',
    confirmButtonText: '确定'
  })
}

// 打印单个账单
const printBill = (order: Order) => {
  showToast({
    type: 'loading',
    message: '正在打印账单...',
    duration: 1000,
    onClose: () => {
      showToast({
        type: 'success',
        message: `${order.buyerName}的账单已打印`
      })
    }
  })
}

// 打印全部账单
const printAllBills = () => {
  if (orders.value.length === 0) {
    showToast('没有待打印的账单')
    return
  }
  
  showToast({
    type: 'loading',
    message: '正在批量打印账单...',
    duration: 1500,
    onClose: () => {
      showToast({
        type: 'success',
        message: `已成功打印${orders.value.length}张账单`
      })
    }
  })
}

// 返回结算页
const goBackToSettlement = () => {
  router.push('/settlement')
}

// 页面加载时获取订单
onMounted(() => {
  fetchPendingOrders()
})
</script>

<style scoped>
.batch-bill-preview {
  min-height: 100vh;
  background: #f7f8fa;
  display: flex;
  flex-direction: column;
}

.page-content {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.summary-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
}

.date {
  font-size: 14px;
  color: #646566;
  margin-bottom: 12px;
}

.total-info {
  display: flex;
  justify-content: space-between;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.label {
  font-size: 14px;
  color: #969799;
  margin-bottom: 4px;
}

.value {
  font-size: 18px;
  font-weight: 500;
  color: #323233;
}

.value.amount {
  color: #ee0a24;
}

.orders-list {
  flex: 1;
}

.order-item {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(100, 101, 102, 0.05);
}

.customer-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.avatar, .default-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}

.info {
  flex: 1;
}

.name {
  font-size: 16px;
  font-weight: 500;
  color: #323233;
  margin-bottom: 4px;
}

.time {
  font-size: 12px;
  color: #969799;
}

.order-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f2f3f5;
}

.products {
  font-size: 14px;
  color: #646566;
}

.amount {
  font-size: 16px;
  font-weight: bold;
  color: #ee0a24;
}

.order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.empty-list {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-actions {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
</style> 